import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';

import 'detail_page.dart';

class LoginPage extends StatelessWidget {
  const LoginPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 1. 设置一个纯色的基础背景
      backgroundColor: const Color(0xFFF3F4F6),
      body: Stack(
        children: [
          // 2. 添加两个装饰性的圆形渐变作为背景光晕
          // 紫色光晕 (左上)
          Positioned(
            // 中心点Y: 60(头部padding) -> top: 60 - 300(半径) = -240
            // 中心点X: -30(屏幕外偏移) -> left: -30 - 300(半径) = -330
            top: -240,
            left: -330,
            child: _buildDecorativeCircle(
              color: const Color(0xFFDAC5FF),
              radius: 300,
            ),
          ),
          // 橙色光晕 (右侧)
          Positioned(
            // 中心点Y: 约在登录框顶部 (估算为200) -> top: 200 - 300(半径) = -100
            // 中心点X: 屏幕右边缘 -> right: 0 - 300(半径) = -300
            top: -100,
            right: -300,
            child: _buildDecorativeCircle(
              color: const Color(0xFFFFDAC5),
              radius: 300,
            ),
          ),
          // 主体内容
          SafeArea(
            child: SingleChildScrollView(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  _buildHeader(),
                  const SizedBox(height: 60),
                  _buildLoginForm(context),
                ],
              ),
            ),
          ),
          // 底部协议
          _buildFooter(context),
        ],
      ),
    );
  }

  /// 创建一个装饰性的圆形渐变光晕
  Widget _buildDecorativeCircle({required Color color, required double radius}) {
    return Container(
      width: radius * 2,
      height: radius * 2,
      decoration: BoxDecoration(
        shape: BoxShape.circle,
        gradient: RadialGradient(
          colors: [
            color,
            color.withOpacity(0), // 从指定颜色平滑过渡到透明
          ],
        ),
      ),
    );
  }

  Widget _buildHeader() {
    // 3. 更新头部文案样式，移除渐变，使用纯色
    const textStyle = TextStyle(
        fontSize: 24, fontWeight: FontWeight.bold, color: Colors.black);

    return Padding(
      padding: const EdgeInsets.only(top: 60.0, left: 16.0, right: 16.0),
      child: Stack(
        clipBehavior: Clip.none,
        children: [
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              const Text(
                'The taste of home',
                style: textStyle,
              ),
              Row(
                children: [
                  const Text(
                    'without the ',
                    style: textStyle,
                  ),
                  Text(
                    'cooking',
                    style: textStyle.copyWith(color: const Color(0xFFFF8A5B)),
                  ),
                ],
              ),
            ],
          ),
          Positioned(
            top: -50,
            right: 0,
            child: Image.asset(
              'assets/images/chef.png', // <-- 替换成你的厨师图片
              height: 180,
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildLoginForm(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 24.0),
      child: Container(
        padding: const EdgeInsets.all(24.0),
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(20.0),
          boxShadow: [
            BoxShadow(
              color: Colors.grey.withOpacity(0.1),
              spreadRadius: 5,
              blurRadius: 15,
              offset: const Offset(0, 5),
            ),
          ],
        ),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            const Text(
              '登录ChopChop',
              style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
            ),
            const SizedBox(height: 8),
            Text(
              '未注册手机号我们将自动为您注册',
              style: TextStyle(fontSize: 14, color: Colors.grey[600]),
            ),
            const SizedBox(height: 30),
            // 邮箱输入框 (静态)
            Text('请输入邮箱', style: TextStyle(color: Colors.grey[400])),
            const Divider(height: 20, thickness: 1),
            const SizedBox(height: 20),
            // 手机号输入框 (静态)
            Row(
              children: [
                const Text('+1', style: TextStyle(fontSize: 16)),
                const SizedBox(width: 8),
                Container(
                  height: 20,
                  width: 1,
                  color: Colors.grey[400],
                ),
                const SizedBox(width: 8),
                Text('请输入手机号', style: TextStyle(color: Colors.grey[400])),
              ],
            ),
            const Divider(height: 20, thickness: 1),
            const SizedBox(height: 30),
            // 获取验证码按钮
            ElevatedButton(
              onPressed: () {
                Navigator.pushReplacement(
                  context,
                  MaterialPageRoute(builder: (context) => const DetailPage()),
                );
              },
              style: ElevatedButton.styleFrom(
                backgroundColor: const Color(0xFFFF8A5B),
                padding: const EdgeInsets.symmetric(vertical: 16),
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(12),
                ),
                elevation: 0,
              ),
              child: const Text(
                '获取验证码',
                style: TextStyle(fontSize: 16, color: Colors.white),
              ),
            ),
            const SizedBox(height: 20),
            const Center(
              child: Text(
                '密码登录',
                style: TextStyle(color: Colors.grey, fontSize: 14),
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildFooter(BuildContext context) {
    return Align(
      alignment: Alignment.bottomCenter,
      child: Padding(
        padding: const EdgeInsets.only(bottom: 30.0),
        child: RichText(
          textAlign: TextAlign.center,
          text: TextSpan(
            style: TextStyle(color: Colors.grey[500], fontSize: 12),
            children: [
              const TextSpan(text: '继续使用即表示您同意chopchop的'),
              TextSpan(
                text: '用户须知使用\n协议',
                style: const TextStyle(color: Color(0xFFFF8A5B)),
                recognizer: TapGestureRecognizer()
                  ..onTap = () {
                    // 协议点击事件
                  },
              ),
              const TextSpan(text: '和'),
              TextSpan(
                text: '隐私政策',
                style: const TextStyle(color: Color(0xFFFF8A5B)),
                recognizer: TapGestureRecognizer()
                  ..onTap = () {
                    // 政策点击事件
                  },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

// 用于实现文字渐变的辅助 Widget (保留，以备将来使用)
class GradientText extends StatelessWidget {
  const GradientText(
      this.text, {
        super.key,
        required this.gradient,
        this.style,
      });

  final String text;
  final TextStyle? style;
  final Gradient gradient;

  @override
  Widget build(BuildContext context) {
    return ShaderMask(
      blendMode: BlendMode.srcIn,
      shaderCallback: (bounds) => gradient.createShader(
        Rect.fromLTWH(0, 0, bounds.width, bounds.height),
      ),
      child: Text(text, style: style),
    );
  }
}
